<template>
  <div id="app">
    <div>每日记事本</div>
    <InputBar v-on:addmsg="addmsg"></InputBar>
    <TodoItem :todos='todos' v-on:delet="delet"></TodoItem>

    <!-- <div>已完成：{{}}/{{todos.length}}</div> -->
  </div>
</template>

<script>
import InputBar from './components/InputBar'
import TodoItem from './components/TodoItem'


export default({
  components:{
    InputBar,
    TodoItem
  },
  data:function(){
    return {
      id:0,
      todos:[{id:1,todoitem:'vue'},{id:2,todoitem:'js'},{id:3,todoitem:'阿巴阿巴'}]
    }
  },
  methods:{
    delet(e){
      this.todos.map((item, index) => {
      if (item.id === e.id) {
        this.todos.splice(index, 1)
      }
    })
    },
    addmsg(e){
      this.items.push({
        id: this.id, 
        todoitem: this.msg
      })
      this.id++
      this.msg=''
    }
  }
})
</script>


<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
